import React, {Component, useState} from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {
    Text,
    View,
    StyleSheet,
    SafeAreaView,
    TextInput,
    Button,
    Dimensions,
    StatusBar,
    TouchableOpacity, Image,
    ImageBackground,
    ActivityIndicator,
} from 'react-native';



export default class Message extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    async componentDidMount() {


    }


    render() {
        const { name, photo, message, messageTime } = this.props;

        return (
            <SafeAreaView>
                <View>
                    <TouchableOpacity style={styls.message}>
                        <Image style={styls.message_image}>

                        </Image>
                        <View style={styls.message_view1}>
                            <Text style={styls.message_infotext1}>{name}</Text>
                            <Text style={styls.message_infotext2}>{message}</Text>
                        </View>
                        <View style={styls.message_view2}>
                            <Text style={styls.message_datetext1}>15:34</Text>
                            <Text style={styls.message_datetext2}>{messageTime}</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </SafeAreaView>


        )
    }
}


const styls=StyleSheet.create({
    message:{
        flexDirection:"row",
        height:Dimensions.get("window").height*3/32,
        width:3*Dimensions.get("window").width/25,
    },
    message_image:{
        height:Dimensions.get("window").height*2/32,
        width:Dimensions.get("window").height*2/32,
        borderRadius:50,
        backgroundColor:"#cccccc",
        marginTop:10,

    },
    message_view1:{
        marginLeft:5,
        height:Dimensions.get("window").height*2/16,
        width:Dimensions.get("window").width*6/10,
    },
    message_infotext1:{
        marginTop:Dimensions.get("window").height*1.5/96,
        height:Dimensions.get("window").height*3/96,
        width:Dimensions.get("window").width*6/10,
        fontSize:16,
        fontWeight:"bold",

    },
    message_infotext2:{
        marginBottom:Dimensions.get("window").height*1/48,
        height:Dimensions.get("window").height*1/48,
        width:Dimensions.get("window").width*6/10,
        fontSize:10,
    },
    message_view2:{
        marginLeft:5,
        height:Dimensions.get("window").height*2/16,
        width:Dimensions.get("window").width*3/20,
    },
    message_datetext1:{
        marginTop:Dimensions.get("window").height*1/96,
        height:Dimensions.get("window").height*4/96,
        width:Dimensions.get("window").width*3/20,
        fontSize:17,
    },
    message_datetext2:{
        marginTop:0,
        height:Dimensions.get("window").height*1/48,
        width:Dimensions.get("window").width*3/20,
        fontSize:10,
    },

})